IHM1 : HTML

Objectifs du chapitre

Dans ce chapitre, nous allons aborder les outils qui vont vous permettre de créer et de développer votre propre site.

Il faut considérer la création de votre site comme un mini projet qui donnera lieu à une évaluation.

Vous avez deux options possibles :

Vous réalisez un site sur un sujet personnel.
Vous réalisez un site sur vos propres productions NSI : captures d'écran, corrections personnelles, liens supplémentaires, etc.

HTML: Définition

Nous allons nous découvrir le langage HTML(Hyper Text Markup Langage) pour aboutir à la création d'une page web qui évoluera sur l'année .

Voici une définition de HTML :

L'HTML est un langage informatique utilisé sur l'internet. Ce langage est utilisé pour créer des pages web. L'acronyme signifie HyperText Markup Language, ce qui signifie en français "langage de balisage d'hypertexte". Cette signification porte bien son nom puisqu'effectivement ce langage permet de réaliser de l'hypertexte à base d'une structure de balisage.

Pour l'instant, nous allons retenir deux éléments de cette définition «conçu pour représenter les pages web» et «un langage de balisage».

Grâce au HTML vous allez pouvoir, dans votre navigateur (Firefox, Chrome, Opera, ...), afficher du texte, afficher des images, proposer des hyperliens (liens vers d'autres pages web), afficher des formulaires et même maintenant afficher des vidéos (grâce à la dernière version du HTML, l'HTML5).

HTML n'est pas un langage de programmation (comme Python par exemple), ici, pas question de conditions, de boucles, ... c'est un langage de description.

En fait le HTML, permet de remplir un page web où chaque élément est contenu dans une balise (dans une capsule). Chacune des balises ayant des propriétés que l'on peut personnaliser à volonté.

Des outils de cours et de développement

Pour coder en HTML, il existe beaucoup de solutions hors ligne ou en ligne. Nous vous suggérons d'utiliser le logiciel https://code.visualstudio.com/.

Pour être efficace dans la découverte du HTML , nous allons fonctionner avec http://jsfiddle.net/.

Vous devriez voir apparaître ceci :

Nous allons pour l'instant uniquement utiliser la fenêtre « HTML » et la fenêtre « Result ».

Vous pouvez également vous rendre dans Capytale où un espace de travail vous attend. Il faut que votre accès à l'ENT de l'établissement soit actif.

Lien vers la séance Capytale

Votre enseignant peut voir votre code et vous aider.

Les balises

Definition et implémentation

Copier le code HTML suivant dans la fenêtre HTML de jsfiddle ou de capytale :

<h1>Hello World! Ceci est un titre</h1>
<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>

Observer l'affichage.

Pour écrire un code HTML, il faudra être rigoureux dans l'écriture du code comme avec Python. La différence est qu'avec Python, un code mal indenté va buguer alors que le navigateur ne renverra pas de message d'erreur sur votre code html.

Voila un exemple de code html bien indenté :

<!DOCTYPE html>
<html>
    <head>
        <title> Première page HTML</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Je viens d'écrire un titre en HTML !</h1>
        <p> Et voilà un premier paragraphe ;)</p>
    </body>
</html>

Vous devez écrire votre HTML soigneusement surtout pour un souci de lecture et de transmissibilité du code.

Chaque balise se compose de son ouverture et de sa fermeture (à quelques exception près)

Une balise ouvrante est de la forme <nom_de_la_balise>, une balise fermante est de la forme </nom_de_la_balise>.

Une vidéo en guise d'aide :

Corriger le code suivant :

Notez que dans notre exercice 1 nous respectons bien cette règle « d'imbrication» des balises avec la balise <p> et la balise <strong>.

Il est important de comprendre que chaque balise a une signification qu'il faut bien respecter (on parle de la sémantique des balises) :

le texte situé entre la balise ouvrante et fermante <h1> est obligatoirement un titre important.

Il existe des balises <h2>, <h3>......qui sont aussi des titres, mais des titres moins importants (sous-titres).
La balise <p> permet de définir un paragraphe. important.
La balise <strong> permet de mettre en évidence un élément important.

Vous devez aussi savoir qu'il existe des balises qui sont à la fois ouvrantes et fermantes (<balise/>) : un exemple, la balise permettant de sauter une ligne, la balise <br/> .

Un commentaire s'écrira ainsi :

<!-- je suis un commentaire -->

Les attributs

Il est possible d'ajouter des éléments à une balise ouvrante, on parle d' attribut. Une balise peut contenir plusieurs attributs :

<ma_balise attribut_1= "valeur_1" attribut_2="valeur_2">

Il existe beaucoup d'attributs différents, tous ne s'appliquent pas à chaque élément.

Liste des attributs .

Écrivez le code HTML suivant :

<h1>Ceci est un titre</h1>
<h2> <font color="pink">Ceci est un sous titre</font> </h2>
<p> <font color="marron">Ceci est un <strong> paragraphe </strong>. Avez-vous bien compris ?</font > </p>

l'attribut s'applique à l'élément font.

Les attributs peuvent recevoir différentes valeurs comme pink et marron dans l'exercice ci-dessus.

Les attributs de l'exercice ne sont pas conseillés en HTML mais plutôt à indiqué dans des feuilles de style CSS.

Les attributs les plus fréquents en HTML seront souvent des sélecteurs comme class ou encore id.

Environnement de développement

JSFIDDLE est un très bel outil, mais il ne peut pas être utilisé pour la réalisation d'un vrai site internet (ou d'une vraie application web).

Dans un premier temps, il va falloir installer visual studio code sur vos machines. Vous pouvez faire une recherche sur le web en faisant attention de trouver le site officiel de visual studio code. Un accès direct

Ouvrir Visual Studio Code et créer un fichier que vous nommerez : cahier_de_bord.html.
Sauvegardez-le.
Écrivez le code suivant :

<!doctype html>
<html lang="fr">
    <head> 
        <meta charset="utf-8"> 
        <title>mon cahier de bord</title>
    </head>
    <body> 
        <h1>Hello World! Ceci est un titre</h1>
        <p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>
    </body> 
</html>

Tester votre code à l'aide d'un navigateur web (Firefox ou Chrome) en “double-cliquant” sur le fichier cahier_de_bord.html.

Astuce ! La combinaison de Touche : Maj+Alt+F permet une indentation automatique.
Si vous voulez héberger votre site, il faudra renommer votre fichier cahier_de_bord.html en index.html.
Dans ce dernier code, vous reconnaissez le code se trouvant entre les balises <body> :

<body>
......
</body>

Tout votre code HTML devra se trouver entre ces 2 balises.
La première ligne (<!doctype html>) permet d'indiquer au navigateur que nous utiliserons la dernière version du HTML, le fameux HTML5.
La balise <html> est obligatoire, l'attribut lang="fr" permet d'indiquer au navigateur que nous utiliserons le français pour écrire notre page.
Les balises <head>...</head> délimitent ce que l'on appelle l'en-tête. L'en-tête contient, dans notre exemple, 2 balises : la balise <meta charset="utf-8"> qui permet de définir l'encodage des caractères (utf-8)(nous reviendrons sur cette notion) et la balise <title> qui définit le titre de la page (attention ce titre ne s'affiche pas dans le navigateur, ne pas confondre avec la balise <h1>).

Les liens

Les liens vers un site internet externe

Un lien externe est un lien vers une page pointée par son URL. Par exemple :

 <a href="https://www.societe-informatique-de-france.fr/"> Société informatique</a>

Dans votre la page web créée précédemment, créer un lien vers un site de votre choix autre que celui proposé en exemple.

Les liens locaux

On peut créer un lien vers une page située sur le même ordinateur en remplaçant l'URL par le fichier cible. Ce lien peut être fait de façon relative, en repérant le fichier cible par rapport au fichier source. Si le fichier cible est "index.html" situé dans le répertoire parent, son lien s'écrira:

 <a href="../index.html"> ... </a>

Ce lien peut aussi être défini de façon absolue, en écrivant l'adresse du fichier cible de façon locale:

 <a href="file:///lecteur:/répertoire/index.html"> ... </a>

Créer une autre page web que vous placerez dans votre arborescence. Créer un lien local de votre première page web vers la nouvelle page créée.

Les liens vers des ancres

Il est également possible de créer une ancre dans une page, c'est-à-dire marquer un endroit précis d'une page pour s'y rendre par un lien hypertexte. Les ancres se définissent grâce à l'attribut NAME ou ID. La syntaxe est la suivante :

 <balise id="ancre"> ... </balise>

L'appel d'une ancre se fait de la manière suivante :

 <a href="#ancre"> ... </a>

Il est ainsi possible de permettre à l'utilisateur de se déplacer au sein d'une même page ou bien d'accéder à une section particulière d'une autre page :

 <a href="url/nom_du_fichier.html#ancre"> ... </a>

Écrire une ancre dans votre page html qui renvoie à l'un de vos titres.

Les images

La balise <img>

On utilise l'élément <img> pour placer les images. Deux attributs sont obligatoires :

L'attribut src pour spécifier le nom du fichier image à charger. Les fichiers images doivent impérativement être aux formats GIF ou JPG.
L'attribut alt pour indiquer un contenu alternatif, c'est à dire un texte à afficher à la place de l'image lorsque, pour différentes raisons, elle n'apparaît pas.

 <img src="img/jardinforet.jpg" alt="Vue aérienne d'un jardin forêt">

Un jardin-forêt ou forêt nourricière est un jardin créé selon le modèle de la forêt naturelle. Il comporte différents étages de végétation tels des grands arbres (fruitiers ou à coques), des arbustes ou arbrisseaux (petits fruitiers), des buissons (à baies ou aromatiques) et des plantes herbacées (légumes vivaces, plantes aromatiques, médicinales et utiles). La forêt nourricière est conçu pour fournir une production alimentaire variée ainsi que d'autres produits tels des épices, des plantes médicinales, des champignons, des matériaux de construction, des fibres, des matériaux pour la vannerie, du miel, du bois de chauffage, du fourrage pour nourrir les animaux, du paillis, du gibier, des produits de la sève, de la teinture et de l’huile tout en nécessitant peu de travail une fois que le système a atteint une certaine maturité.

Réaliser une capture d'écran d'une partie de ce cours et écrivez en un commentaire.
Insérer la capture d'écran dans votre page avec votre commentaire.

Pour une bonne pratique vous créerez, dans le répertoire contenant le fichier html, un nouveau répertoire que vous nommerez img, répertoire dans lequel vous mettrez vos images.
Pour accéder aux images, il vous suffira de préciser le chemin d'accès depuis le fichier html avec :

 < img src="img/nom_fichier_image.format" alt="texte alternatif">

Positionner une image, gérer ses dimensions...

L'attribut align :
Il indique le mode d'alignement horizontale de l'image. Il y a 5 valeurs possibles : top, middle, bottom, left, right.
Les trois premiers concernent l'alignement vertical par rapport à la ligne.
Les valeurs left et right permettent d'habiller une image avec le texte, en plaçant l'image respectivement à gauche et à droite.

L'utilisation de l'attribut align est déconseillé. Il vaut mieux réserver ce genre de traitement au css. Le css sera traité dans le chapitre IHM2 : css.

Tester l'attribut avec la capture d'écran précédente.

Redimensionner une image

Pour redimensionner une image, on peut utiliser l'attribut width (pour la largeur) et/ou height (pour la hauteur).

Une petite astuce ici : en ne modifiant que l’un des deux paramètres de l’image, le second va se mettre automatiquement à l’échelle.

Redimensionner votre capture d'écran.

Utiliser une image dans un lien

Une image peut renvoyer vers un lien avec ce code

 <a href="test1.html"> <img src="./test.jpg"> </a>

Faites un lien dans votre page web qui renvoie vers ce cours avec l'image de la capture d'écran.

Type BLOCK et type INLINE

Un élément de type block va toujours commencer sur une nouvelle ligne et prendre toute la largeur disponible dans la page.

De plus, un élément de type block peut contenir d’autres éléments de type block ainsi que des éléments de type inline.

Les éléments HTML de type block les plus communs sont les suivants p,h1,h2,..., ol, ul, div

Au contraire des éléments de type block, les éléments de type inline ne vont pas commencer sur une nouvelle ligne mais s’insérer dans la ligne actuelle.

Les élément de type inline prennent uniquement la largeur qui leur est nécessaire (c’est-à-dire la largeur de leur contenu).

Les éléments HTML de type inline les plus communs sont les suivants strong,em, a, img, span

Les vidéos

Pour ne pas alourdir la séquence, nous ne traiterons pas ensemble de l'implémentation des vidéos, si cela vous intéresse vous pouvez vous rendre sur ce site.

Rendez-vous sur youtube. Choisissez une vidéo sur l'histoire du web et insérer là dans votre page web.

Sur Youtube, il existe une commande partager

Dans cette commande, nous choisissons souvent intégrer qui possède de nombreux attributs prédéfinis.

Les téléchargements

Pour donner une ressource, on peut écrire la ligne de code suivante :

 <a href="adresse_de_l'image" download="nom_du_fichier_à_dl_avec_son_extension">étiquette apparente </a>

Vous devez à ce stade être en capacité de montrer à votre enseignant une page HTML avec :

Une structure comprenant des titres, sous-titres, paragraphes.
Des liens vers des sites externes.
Des liens vers d'autres pages html en local.
Des liens vers des ancres.
Des images.
Des liens vers des vidéos.
Des téléchargements.

Appelez votre enseignant pour lui faire constater votre réussite.

Vous êtes prêt.e.s pour créer votre propre site

Votre projet : créer votre site

Vous êtes libres de créer un site selon vos centres intérêts.

Si vous voulez structurer plus précisément votre page web pour lui donner une en-tête, un corps de page, une partie latérale, un pied de page, ..., vous pouvez vous aider de cette page Web où vous découvrirez entre autre comment utilisez les balises <header> (pour une en-tête), <footer> (pour un pied de page), <main> (pour le contenu principal), <section> (pour un contenu principal), <aside> (pour un contenu latéral), <div> (pour une subdivision) et <span> (pour particulariser une toute petite partie)

Utiliser des attributs id pour vos balises définissant des éléments uniques ou des attributs class pour définir un ensemble d'éléments qui auront une mise en forme particulière une fois le CSS vu.

Si vous n'avez aucune idée, vous pouvez créer un site qui vous servira en parallèle de cahier de bord pour sauvegarder vos travaux. Dans ce cas, la suite détaille nos attentes.

Reprendre votre fichier texte sur votre cahier de bord. Nous allons en faire un fichier HTML pour le mettre en ligne dans l'année. Nous procéderons par étape : texte, HTML, CSS, JS, voire PHP.

Pour l'instant nommez ce cahier de bord cdb_prenom_nom.html

Voila le cahier des charges de votre travail. :

le tire de la séquence sera un titre h2, par exemple : "W1 : HTML" est un titre suffisant.
la date est le numéro de séance seront indiqués dans un titre h3,par exemple : "12/09, séance 2".
Chaque séance devra être résumé ou décrite dans un paragraphe p dont la balise ouvrante ressemblera à
```
 <p class="contenu"> 
```
. Vous pouvez changer le nom de la class.
Dans l'ensemble du cahier de bord il faudra avoir au moins une image ( qui peut être constitué d'une capture d'écran),un lien (vers le cours par exemple.), un fichier à télécharger(un tp par exemple) et une vidéo ( une prise vidéo de votre écran commenté)

Hébergement

Vous pouvez, si vous le souhaitez, héberger votre travail pour en faire un site. Il y a de nombreux avantages (disponibilité, sauvegarde, faire le BG, etc). Votre fournisseur accès peut devenir votre hébergeur. Il y a aussi de nombreuses plateformes sur le web. Webhost est assez pratique. Vous trouverez une vidéo qui explique l'hébergement sur webhost :

Le système d'exploitation de l'hébergeur est un linux, il fait la différence entre les minuscules et les majuscules . Cette remarque vaut surtout pour les extensions de photos (par exemple).
Le fichier principal doit s'appeler index.html.

Quelques éléments d'histoire :

Durant la première moitié des années 1990, avant l’apparition des technologies web comme JavaScript, les feuilles de style en cascade et le Document Object Model, l’évolution de HTML a dicté l’évolution du World Wide Web.
Depuis 1997 et HTML 4, l’évolution de HTML a fortement ralenti ; 10 ans plus tard, HTML 4 reste utilisé dans les pages web.
En 2008, la spécification du HTML5 est à l’étude et devient d'usage courant dans la seconde moitié des années 2010.

Sitographie

Les différents auteurs mettent l'ensemble du site à disposition selon les termes de la licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

▲